<template>
	<u-popup :show="show" :round="20">
		<view class="pop-driver">
			<view class="head">
				<text>选择驾驶员</text>
				<u-icon name="close" color="#666666" size="22" @click="show = false"></u-icon>
			</view>
			<view class="set-height" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view v-else>
				<view class="list-box" v-if="list.length !== 0">
					<view v-for="(item, index) in list" :key="index" @click="checks(item)">
						<text class="danshen" :class="{'active': checkId === index}">{{ item.nickname }}（{{ item.mobile }}）{{ item.delivery_area }}</text>
						<u-icon name="checkmark" color="#023F92" size="22" v-if="checkId === item.id"></u-icon>
					</view>
				</view>
				<view v-else class="empty-box">
					<empty title="暂无驾驶员数据"/>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		driverList
	} from 'utils/api/manage.js'
	export default {
		data() {
			return {
				show: false,
				checkId: '',
				list: [],
				loading: false
			}
		},
		created() {
		},
		methods: {
			getList() {
				this.loading = true
				driverList().then((res) => {
					this.list = res.data
				}).finally(() => {
					this.loading = false
				})
			},
			checkOpen(driver_id) {
				this.show = true
				this.checkId = driver_id || ''
				this.getList()
			},
			checks(item) {
				this.checkId = item.id
				this.show = false
				this.$emit('getDriver', item.id)
			}
		}
	}
</script>

<style scoped lang="scss">
.empty-box {
	box-sizing: border-box;
	padding: 80upx 0;
}
.set-height {
	height: 500upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pop-driver {
	width: 100%;
	box-sizing: border-box;
	padding: 0 32upx;
	.list-box {
		max-height: 700upx;
		overflow-y: scroll;
		>view {
			height: 114upx;
			display: flex;
			border-bottom: 1px solid #F4F4F4;
			align-items: center;
			justify-content: space-between;
			>text {
				font-size: 30upx;
				color: #333333;
			}
			.active {
				color: #023F92 !important;
			}
		}
	}
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34upx 0;
		>text {
			font-size: 32upx;
			color: #333333;
		}
	}
}
</style>